<template>
  <div style="padding:4px 10px">
    <el-row style="padding:4px">
      <el-button type="primary" @click="handleSave">
        保存
      </el-button>
      <!-- <el-button type="primary" @click="handleGenerate">
        生成
      </el-button> -->
      <el-button @click="handleShowProperty">
        <SvgIcon name="Print"></SvgIcon>
        页面属性
      </el-button>
      <!-- <el-button @click="handleShowDataSourceParam">
        <SvgIcon name="DataSourceParam"></SvgIcon>
        数据源参数
      </el-button> -->
      <el-button @click="handleShowDataSource">
        <SvgIcon name="DataSource"></SvgIcon>
        数据源配置
      </el-button>

      <!-- <el-button v-show="manager.Body.AllGridViews.length>0" @click="handleTableView">
        <SvgIcon name="GridView"></SvgIcon>
        表格属性
      </el-button> -->

      <!-- <template v-if="manager.states.tableIndex>-1">
        <el-form-item label="左边距">
          <el-input-number
            v-model="currentGridView.Left" :controls="false" style="width:60px"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="上边距">
          <el-input-number v-model="manager.Body.AllGridViews[manager.states.tableIndex].Top" :controls="false" style="width:60px"></el-input-number>
        </el-form-item>
      </template> -->
    </el-row>
    <el-row style="padding:4px">
      <el-dropdown split-button :type="isBorderLeft" @click="handleLeftBorder" @command="handleLeftBorderCommand">
        <svg-icon name="BorderLeft" />
        <template #dropdown>
          <BorderDropDown :border-style="BorderLeftLineStyle" :border-width="BorderLeftWidth"></BorderDropDown>
        </template>
      </el-dropdown>

      <el-dropdown split-button :type="isBorderTop" @click="handleTopBorder" @command="handleTopBorderCommand">
        <svg-icon name="BorderTop" />
        <template #dropdown>
          <BorderDropDown :border-style="BorderTopLineStyle" :border-width="BorderTopWidth"></BorderDropDown>
        </template>
      </el-dropdown>
      <el-dropdown split-button :type="isBorderRight" @click="handleRightBorder" @command="handleRightBorderCommand">
        <svg-icon name="BorderRight" />
        <template #dropdown>
          <BorderDropDown :border-style="BorderRightLineStyle" :border-width="BorderRightWidth"></BorderDropDown>
        </template>
      </el-dropdown>

      <el-dropdown split-button :type="isBorderBottom" @click="handleBottomBorder" @command="handleBottomBorderCommand">
        <svg-icon name="BorderBottom" />
        <template #dropdown>
          <BorderDropDown :border-style="BorderBottomLineStyle" :border-width="BorderBottomWidth"></BorderDropDown>
        </template>
      </el-dropdown>

      <!-- <el-button-group>
        <el-button>
          <svg-icon name="BorderStyle2" />
        </el-button>
        <el-button>
          <svg-icon name="BorderColor" />
        </el-button>
      </el-button-group> -->

      <template v-if="valCellType==='Textbox'">

        <el-button-group>
          <el-button :type="isAlignLeft" @click="handleAlignLeft">
            <svg-icon name="AlignLeft" />
          </el-button>
          <el-button :type="isAlignCenter" @click="handleAlignCenter">
            <svg-icon name="AlignCenter" />
          </el-button>
          <el-button :type="isAlignRight" @click="handleAlignRight">
            <svg-icon name="AlignRight" />
          </el-button>
        </el-button-group>

        <el-button-group>
          <el-button :type="isAlignTop" @click="handleAlignTop">
            <svg-icon name="AlignTop" />
          </el-button>
          <el-button :type="isAlignMiddle" @click="handleAlignMiddle">
            <svg-icon name="AlignMiddle" />
          </el-button>
          <el-button :type="isAlignBottom" @click="handleAlignBottom">
            <svg-icon name="AlignBottom" />
          </el-button>
        </el-button-group>

        <el-button-group>
          <el-button :type="isFontBold" @click="handleFontBold">
            <svg-icon name="FontBold" />
          </el-button>
          <el-button :type="isFontItalic" @click="handleFontItalic">
            <svg-icon name="FontItalic" />
          </el-button>
          <el-button :type="isFontStrikeout" @click="handleFontStrikeout">
            <svg-icon name="FontStrikeout" />
          </el-button>
          <el-button :type="isFontUnderline" @click="handleFontUnderline">
            <svg-icon name="FontUnderline" />
          </el-button>
          <el-button :type="isWritingMode" @click="handleWritingMode">
            <svg-icon name="WritingMode" />
          </el-button>
        </el-button-group>

        <Colorpicker @change="handleForeColor">
          <template #icon>
            <svg-icon name="FontColor" :color="ForeColor" />
          </template>
        </Colorpicker>
        <Colorpicker @change="handleBackColor">
          <template #icon>
            <svg-icon name="BackgroundColor" :color="BackColor" />
          </template>
        </Colorpicker>

        <el-select :model-value="FontName" style="width:70px" @change="handleFontName">
          <el-option key="1" value="宋体" label="宋体">
          </el-option>
          <el-option key="2" value="微软雅黑" label="微软雅黑">
          </el-option>
          <el-option key="3" value="黑体" label="黑体">
          </el-option>
        </el-select>

        <el-select :model-value="FontSize" style="width:60px" @change="handleFontSize">
          <el-option key="9" :value="9" label="9">
          </el-option>
          <el-option key="10" :value="10" label="10">
          </el-option>
          <el-option key="11" :value="11" label="11">
          </el-option>
          <el-option key="12" :value="12" label="12">
          </el-option>
          <el-option key="14" :value="14" label="14">
          </el-option>
          <el-option key="16" :value="16" label="16">
          </el-option>
          <el-option key="18" :value="18" label="18">
          </el-option>
          <el-option key="20" :value="20" label="20">
          </el-option>
          <el-option key="22" :value="22" label="22">
          </el-option>
          <el-option key="24" :value="24" label="24">
          </el-option>
          <el-option key="26" :value="26" label="26">
          </el-option>
        </el-select>

      </template>
    </el-row>
  </div>
</template>

<script>

import computedMixin from './computedMixin.js';
import methodsMixin from './methodsMixin.js';
import SvgIcon from '@/components/SvgIcon/index.vue';
import BorderDropDown from './BorderDropDown.vue';
export default {
  components: {
    SvgIcon,
    BorderDropDown,
  },
  mixins: [computedMixin, methodsMixin],
  inject: ['manager'],
  data() {
    return {

    };
  },
  computed: {
    currentGridView() {
      return this.manager.Body.AllGridViews[this.manager.states.tableIndex];
    },
  },

  methods: {
    handleShowProperty() {
      this.manager.states.ReportViewPropertyVisible = true;
    },
    handleShowDataSource() {
      this.manager.states.EditDataSourceVisible = true;
    },
    handleShowDataSourceParam() {
      this.manager.states.EditDataSourceParamVisible = true;
    },
    handleTableView() {
      this.manager.states.EditTableVisible = true;
    },

    async  handleSave() {
      const res = await this.manager.saveGridView();
      if (res) {
        this.$message({
          type: 'success',
          message: '保存成功',
        });
      }
    },
    async handleGenerate() {
      const res = await this.manager.Generate();
      if (res) {
        this.$message({
          type: 'success',
          message: '生成成功',
        });
      }
    },

  },
};
</script>

<style>

</style>
